"use client"

import { useState, useEffect } from 'react'
import RegionsManager from '@/components/admin/regions-manager'
import Login from '@/components/admin/login'

export default function RegionsPage() {
  const [isAuthenticated, setIsAuthenticated] = useState(false)
  const [isLoading, setIsLoading] = useState(true)
  
  // 检查用户是否已经登录
  useEffect(() => {
    const checkAuth = () => {
      // 先检查session storage
      const sessionAuth = sessionStorage.getItem('admin_auth')
      // 再检查local storage
      const localAuth = localStorage.getItem('admin_auth')
      
      if (sessionAuth || localAuth) {
        setIsAuthenticated(true)
      }
      
      setIsLoading(false)
    }
    
    // 由于涉及到localStorage和sessionStorage，
    // 需要在客户端渲染后执行
    checkAuth()
  }, [])

  const handleLoginSuccess = () => {
    setIsAuthenticated(true)
  }

  // 加载中状态
  if (isLoading) {
    return (
      <div className="flex items-center justify-center min-h-[calc(100vh-130px)]">
        <div className="text-center">
          <div className="inline-block animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-500 mb-4"></div>
          <p className="text-gray-400">正在加载...</p>
        </div>
      </div>
    )
  }

  // 如果未认证，显示登录表单
  if (!isAuthenticated) {
    return <Login onLoginSuccess={handleLoginSuccess} />
  }

  // 已认证，显示地区管理界面
  return <RegionsManager />
} 